<template>
  <view>
    <cu-custom bgColor="bg-gradual-pink" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">模态窗口</block>
    </cu-custom>
    <view class="cu-bar bg-white margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 普通窗口
      </view>
      <view class="action">
        <button
          class="cu-btn bg-green shadow"
          @tap="showModal"
          data-target="Modal"
        >
          Modal
        </button>
      </view>
    </view>
    <view class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">Modal标题</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl"> Modal 内容。 </view>
      </view>
    </view>

    <view class="cu-bar bg-white margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 底部窗口
      </view>
      <view class="action">
        <button
          class="cu-btn bg-green shadow"
          @tap="showModal"
          data-target="bottomModal"
        >
          Bottom
        </button>
      </view>
    </view>
    <view
      class="cu-modal bottom-modal"
      :class="modalName == 'bottomModal' ? 'show' : ''"
    >
      <view class="cu-dialog">
        <view class="cu-bar bg-white">
          <view class="action text-green">确定</view>
          <view class="action text-blue" @tap="hideModal">取消</view>
        </view>
        <view class="padding-xl"> Modal 内容。 </view>
      </view>
    </view>

    <view class="cu-bar bg-white margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 对话窗口
      </view>
      <view class="action">
        <button
          class="cu-btn bg-green shadow"
          @tap="showModal"
          data-target="DialogModal1"
        >
          Dialog
        </button>
        <button
          class="cu-btn bg-blue shadow margin-left"
          @tap="showModal"
          data-target="DialogModal2"
        >
          Dialog
        </button>
      </view>
    </view>
    <view class="cu-modal" :class="modalName == 'DialogModal1' ? 'show' : ''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">Modal标题</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl"> Modal 内容。 </view>
        <view class="cu-bar bg-white justify-end">
          <view class="action">
            <button class="cu-btn line-green text-green" @tap="hideModal">
              取消
            </button>
            <button class="cu-btn bg-green margin-left" @tap="hideModal">
              确定
            </button>
          </view>
        </view>
      </view>
    </view>

    <view class="cu-modal" :class="modalName == 'DialogModal2' ? 'show' : ''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">Modal标题</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl"> Modal 内容。 </view>
        <view class="cu-bar bg-white">
          <view class="action margin-0 flex-sub text-green" @tap="hideModal">
            <text class="cuIcon-moneybag"></text>微信支付</view
          >
          <view
            class="action margin-0 flex-sub text-green solid-left"
            @tap="hideModal"
            >取消</view
          >
          <view class="action margin-0 flex-sub solid-left" @tap="hideModal"
            >确定</view
          >
        </view>
      </view>
    </view>

    <view class="cu-bar bg-white margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 图片窗口
      </view>
      <view class="action">
        <button
          class="cu-btn bg-green shadow"
          @tap="showModal"
          data-target="Image"
        >
          Image
        </button>
      </view>
    </view>

    <view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''">
      <view class="cu-dialog">
        <view
          class="bg-img"
          style="
            background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg');
            height: 200px;
          "
        >
          <view class="cu-bar justify-end text-white">
            <view class="action" @tap="hideModal">
              <text class="cuIcon-close"></text>
            </view>
          </view>
        </view>
        <view class="cu-bar bg-white">
          <view class="action margin-0 flex-sub solid-left" @tap="hideModal"
            >我知道了</view
          >
        </view>
      </view>
    </view>

    <view class="cu-bar bg-white margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 单选窗口
      </view>
      <view class="action">
        <button
          class="cu-btn bg-green shadow"
          @tap="showModal"
          data-target="RadioModal"
        >
          Radio
        </button>
      </view>
    </view>

    <view
      class="cu-modal"
      :class="modalName == 'RadioModal' ? 'show' : ''"
      @tap="hideModal"
    >
      <view class="cu-dialog" @tap.stop="">
        <radio-group class="block" @change="RadioChange">
          <view class="cu-list menu text-left">
            <view class="cu-item" v-for="(item, index) in 5" :key="index">
              <label class="flex justify-between align-center flex-sub">
                <view class="flex-sub">Item {{ index + 1 }}</view>
                <radio
                  class="round"
                  :class="radio == 'radio' + index ? 'checked' : ''"
                  :checked="radio == 'radio' + index ? true : false"
                  :value="'radio' + index"
                ></radio>
              </label>
            </view>
          </view>
        </radio-group>
      </view>
    </view>

    <view class="cu-bar bg-white margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 多选窗口
      </view>
      <view class="action">
        <button
          class="cu-btn bg-green shadow"
          @tap="showModal"
          data-target="ChooseModal"
        >
          Choose
        </button>
      </view>
    </view>
    <view
      class="cu-modal bottom-modal"
      :class="modalName == 'ChooseModal' ? 'show' : ''"
      @tap="hideModal"
    >
      <view class="cu-dialog" @tap.stop="">
        <view class="cu-bar bg-white">
          <view class="action text-blue" @tap="hideModal">取消</view>
          <view class="action text-green" @tap="hideModal">确定</view>
        </view>
        <view class="grid col-3 padding-sm">
          <view
            v-for="(item, index) in checkbox"
            class="padding-xs"
            :key="index"
          >
            <button
              class="cu-btn orange lg block"
              :class="item.checked ? 'bg-orange' : 'line-orange'"
              @tap="ChooseCheckbox"
              :data-value="item.value"
            >
              {{ item.name }}
              <view
                class="cu-tag sm round"
                :class="item.checked ? 'bg-white text-orange' : 'bg-orange'"
                v-if="item.hot"
                >HOT</view
              >
            </button>
          </view>
        </view>
      </view>
    </view>

    <view class="cu-bar bg-white margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange"></text> 侧边抽屉
      </view>
      <view class="action">
        <button
          class="cu-btn bg-green shadow"
          @tap="showModal"
          data-target="DrawerModalL"
        >
          Left
        </button>
        <button
          class="cu-btn bg-blue shadow margin-left"
          @tap="showModal"
          data-target="DrawerModalR"
        >
          Right
        </button>
      </view>
    </view>
    <view
      class="cu-modal drawer-modal justify-start"
      :class="modalName == 'DrawerModalL' ? 'show' : ''"
      @tap="hideModal"
    >
      <view
        class="cu-dialog basis-lg"
        @tap.stop=""
        :style="[
          {
            top: CustomBar + 'px',
            height: 'calc(100vh - ' + CustomBar + 'px)',
          },
        ]"
      >
        <view class="cu-list menu text-left">
          <view class="cu-item arrow" v-for="(item, index) in 5" :key="index">
            <view class="content">
              <view>Item {{ index + 1 }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view
      class="cu-modal drawer-modal justify-end"
      :class="modalName == 'DrawerModalR' ? 'show' : ''"
      @tap="hideModal"
    >
      <view
        class="cu-dialog basis-lg"
        @tap.stop=""
        :style="[
          {
            top: CustomBar + 'px',
            height: 'calc(100vh - ' + CustomBar + 'px)',
          },
        ]"
      >
        <view class="cu-list menu text-left">
          <view class="cu-item arrow" v-for="(item, index) in 5" :key="index">
            <view class="content">
              <view>Item {{ index + 1 }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      CustomBar: this.CustomBar,
      modalName: null,
      radio: "radio1",
      checkbox: [
        {
          value: 0,
          name: "10元",
          checked: false,
          hot: false,
        },
        {
          value: 1,
          name: "20元",
          checked: true,
          hot: false,
        },
        {
          value: 2,
          name: "30元",
          checked: true,
          hot: true,
        },
        {
          value: 3,
          name: "60元",
          checked: false,
          hot: true,
        },
        {
          value: 4,
          name: "80元",
          checked: false,
          hot: false,
        },
        {
          value: 5,
          name: "100元",
          checked: false,
          hot: false,
        },
      ],
    };
  },
  methods: {
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target;
    },
    hideModal(e) {
      this.modalName = null;
    },
    RadioChange(e) {
      this.radio = e.detail.value;
    },
    ChooseCheckbox(e) {
      let items = this.checkbox;
      let values = e.currentTarget.dataset.value;
      for (let i = 0, lenI = items.length; i < lenI; ++i) {
        if (items[i].value == values) {
          items[i].checked = !items[i].checked;
          break;
        }
      }
    },
  },
};
</script>

<style>
button .cu-tag {
  position: absolute;
  top: 8upx;
  right: 8upx;
}
</style>
